<template>
  <div>
    <div>
      <div class="classify" ref="classify"></div>
    </div>
  </div>
</template>


<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  mounted() {
    // 绘制行业占比 图
    this.drawclassify();
  },
  methods: {
    // 绘制行业占比 图
    drawclassify() {
      // 1.初始化绘图容器
      let classify = echarts.init(this.$refs.classify);
      // 2.绘图配置项
      let option1 = {
        tooltip: {
          trigger: "item",
          formatter: " <br/>{b} : {c} ({d}%)",
          triggerOn: "click",
        },
        visualMap: {
          show: false,
          min: 10,
          max: 500,
          inRange: {
            colorLightness: [0, 1],
          },
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "52%"],
            data: [
              { value: 320, name: "电子信息" },
              { value: 150, name: "节能环保" },
              { value: 300, name: "生物医药" },
              { value: 50, name: "其他" },
              { value: 180, name: "工业生产" },
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            avoidLabelOverlap: false,
            // hoverAnimation: false, // 取消鼠标滑入放大的效果
            // animation: false, // 取消饼图展开的效果
            label: {
              color: "#333",
              fontFamily: "Microsoft YaHei",
              fontSize: 15,
              formatter: "{b} \n \n {d}%",
              padding: [0, -50, 0, -45],
            },
            labelLine: {
              show: true,
              lineStyle: {
                color: "#BCC3D6",
                type: "radial",
              },
              smooth: 0,
              length: 5,
              length2: 80,
            },
            itemStyle: {
              normal: {
                color: "#0063FF",
              },
              emphasis: {
                color: "rgba(50,226,248,0.7)",
              },
              shadowBlur: 200,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 3,绘图
      classify.setOption(option1);
      // 自动高亮动画
      var myChartPieIndex = 0;
      var a = setInterval(function () {
        var dataLen = option1.series[0].data.length;
        // 取消之前高亮的图形
        classify.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: myChartPieIndex,
        });
        myChartPieIndex = (myChartPieIndex + 1) % dataLen;
        // 高亮当前图形
        classify.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: myChartPieIndex,
        });
      }, 1000);
    },
  },
};
</script>

<style scoped>
.classify {
  width: 100%;
  height: 300px;
}
</style>